<template>
    <div>
        <NavBar :rightText="rightText" :title="title" :onClickRight="onClickRight" />
        <div class="signInRoot assignBox">
            <div id="head">
                <div class="top">
                    <Amap />
                </div>
                <div @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend">===</div>
            </div>
            <div class="moveBottom">
                <div class="bgc-white pd-10">
                    <van-notice-bar text="通知内容" left-icon="volume">
                        <p class="van-color-text-assist">
                            昨日打卡情况异常，
                            <span class="color-primary" @click="check">点击此处</span>进入补卡
                        </p>
                    </van-notice-bar>
                    <ul class="assignList">
                        <VuePerfectScrollbar>
                            <li>
                                <div>
                                    <span class="fs-18">08:25</span>
                                    <van-tag type="info" class="mgl-5">{{ inOrOutFlag == '1' ? '内勤' : '外勤' }}</van-tag>
                                </div>
                                <div class="color-grey">
                                    <van-icon name="hospital-map" />
                                    泰豪动漫学院
                                </div>
                            </li>
                            <li>
                                <div>
                                    <span class="fs-18">08:25</span>
                                    <van-tag type="info" class="mgl-5">{{ inOrOutFlag == '1' ? '内勤' : '外勤' }}</van-tag>
                                </div>
                                <div class="color-grey">
                                    <van-icon name="hospital-map" />
                                    泰豪动漫学院
                                </div>
                            </li>
                            <li>
                                <div>
                                    <span class="fs-18">08:25</span>
                                    <van-tag type="info" class="mgl-5">{{ inOrOutFlag == '1' ? '内勤' : '外勤' }}</van-tag>
                                </div>
                                <div class="color-grey">
                                    <van-icon name="hospital-map" />
                                    泰豪动漫学院
                                </div>
                            </li>
                            <li>
                                <div>
                                    <span class="fs-18">08:25</span>
                                    <van-tag type="info" class="mgl-5">内勤</van-tag>
                                </div>
                                <div class="color-grey">
                                    <van-icon name="hospital-map" />
                                    泰豪动漫学院
                                </div>
                            </li>
                        </VuePerfectScrollbar>
                    </ul>
                    <div class="assignTimes">
                        <div>
                            <div class="text">
                                <p class="fs-20 mgb-5">上班</p>
                                <p>08:30{{ inOrOutFlag == '1' ? '内勤' : '外勤' }}</p>
                            </div>
                        </div>
                        <div>
                            <div class="text" @click="lockIndShowFlag = true">
                                <p class="fs-20 mgb-5">下班</p>
                                <p>08:30{{ inOrOutFlag == '1' ? '内勤' : '外勤' }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <TabBar @changeTabbar="changeTabbar" />
    </div>


</template>

<script>
import Amap from '@/components/Amap';
import VuePerfectScrollbar from 'vue-perfect-scrollbar';
import Worker from 'worker-loader!./worker.js';
import TabBar from '@/components/TabBar';
import NavBar from '@/components/NavBar';
import { mapState } from 'vuex'
export default {
    computed: {
        ...mapState(['inOrOutFlag', 'title', 'rightText', 'titleObj'])
    },
    components: {
        TabBar,
        NavBar,
        Amap,
        VuePerfectScrollbar
    },
    data() {
        return {
            readmeshowflag: false,
            lockIndShowFlag: false,
            goOutReason: '',
            goOutReasonFlag: false,
            worker: null,
            signInFlag: false,
        }
    },
    methods: {
        touchstart(e) {
            this.startY = e.touches[0].clientY;
            this.topHeight = document.getElementById('head').clientHeight;
        },
        touchmove(e) {
            this.moveY = e.touches[0].clientY;
            this.disY = this.moveY - this.startY;
            document.getElementById('head').style.height = this.disY + this.topHeight + 'px';
        },
        check() {
            this.$router.push('/main/workAttendanceCardApply');
            this.$store.commit('changeTabBar', 3);
            this.$store.commit('updateTabBarActive', 3)
        },
        changeTabbar(page) {
            this.$store.commit('changeTabBar', page);
        }

    },
};
</script>

<style lang="scss" scoped>
.signInRoot {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    #head {
        height: 250px;
        max-height: 600px;
        min-height: 250px;
        width: 100%;
        display: flex;
        flex-direction: column;

        .top {
            flex: 1;
            width: 100%;
        }
    }

    .moveBottom {
        flex: 1;
        width: 100%;
    }

    .line {
        width: 100%;
        height: 10px;
        background: black;
    }
}

.assignBox {
    .van-notice-bar {
        background-color: #ffffff !important;
        padding: 5px 14px !important;
    }

    .assignList {
        border-top: 1px solid #ccc;
        padding: 10px 5px;
        max-height: 320px !important;
        overflow: auto;

        li {
            &:first-child {
                background-color: #409eff;
                color: #fff;

                div:last-child {
                    color: #fff !important;
                }
            }

            width: 100%;
            padding: 10px 15px;
            border: 1px solid #409eff;
            border-radius: 5px;
            margin-bottom: 10px;

            div:first-child {
                display: flex;
                align-items: center;
                margin-bottom: 6px;
            }
        }
    }

    .assignTimes {
        >div {
            width: 120px;
            height: 120px;
            background-color: #409eff;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;

            .text {
                display: flex;
                flex-direction: column;
                text-align: center;
            }
        }

        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 30px;

        position: fixed;
        width: 100%;
        background: #ffff;
        bottom: 47px;
        left: 0;
    }
}

.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;

    .block {
        width: 80%;
        background-color: #fff;

        >div {
            padding: 10px;
            color: #909399;
        }

        .btn {
            text-align: center;

            button {

                border: none;
                background: none;
                border-radius: 14px;

                &:first-child {
                    padding: 8px 25px;
                    border: 1px solid #ccc;
                }

                &:last-child {
                    color: #fff;
                    padding: 8px 45px;
                    background-color: #409eff;
                    margin-left: 10px
                }
            }

        }

        h3 {
            height: 30px;
            line-height: 30px;
            font-size: 16px;
            text-align: center;
            font-weight: 700;
            color: #999;
        }
    }

    .lockInBox {
        width: 80%;
        height: 200px;
        background-color: #fff;
        padding: 10px;
    }

}



</style>